<!-- 角色管理 -->
<style lang="less" scoped>
.role {
  margin: 15px;

  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    display: inline-block;
    margin-left: 20px;
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
}
</style>


<template>
  <div class="role">
    <Card :bordered="false">
      <p slot="title">系统权限设置 > <span class="select-font">角色管理</span>
      </p>
      <div>
        <Button type="primary"
                @click.native="addrole">新增角色</Button>
        <Button type="error"
                @click.native="del1"
                style="margin-left: 20px">删除角色</Button>
        <Form :model="formItem"
              class="smallForm">
          <Input v-model="formItem.name"
                 style="width:200px;"
                 :maxlength="20"
                 placeholder="请输入角色名称" />
        </Form>
        <Button type="info"
                style="margin-left: 20px"
                @click="submitSearch('1')">搜索</Button>
      </div>
    </Card>
    <div class="">
      <Table :data="roleData"
             @on-selection-change="showSelect"
             :columns="roleColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="waterRecordPage.total"
            :current="waterRecordPage.current"
            :page-size="waterRecordPage.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
      <Modal v-model="moduleModal"
             width="1000"
             class="moduleModal"
             :mask-closable="false">
        <div slot="header">{{updateTitle}}</div>
        <Form :model="moduleItem"
              :rules="rules"
              :label-width='80'>
          <Form-item label="角色名称"
                     prop="rolename">
            <Input v-model="moduleItem.rolename"
                   :maxlength="20"
                   @on-blur="checkName"
                   placeholder="请输入角色名称" />
          </Form-item>
          <Form-item label="角色描述"
                     prop="description">
            <Input v-model="moduleItem.description"
                   :maxlength="100"
                   placeholder="请输入角色描述" />
          </Form-item>
          <Form-item label="角色等级"
                     prop="level">
            <Select clearable
                    v-model="moduleItem.level">
              <Option value="1">1级部门可用</Option>
              <Option value="2">2级部门可用</Option>
              <Option value="3">3级部门可用</Option>
              <Option value="4">4级部门可用</Option>
              <Option value="5">5级部门可用</Option>
            </Select>
          </Form-item>
          <Form-item label="角色类型"
                     prop="user_type">
            <Select v-model="moduleItem.user_type"
                    clearable>
              <Option v-for="item in typeList"
                      :value="item.value"
                      :key="item.value">{{ item.title }}</Option>
            </Select>
          </Form-item>
        </Form>
        <Table :data="moduleData"
               @on-selection-change="checkRole"
               :columns="moduleColumns"
               stripe></Table>
        <div slot="footer">
          <Button v-if="btnSave"
                  type="primary"
                  @click="ok">保存</Button>
          <Button v-if="btnChange"
                  type="primary"
                  @click="changeRole">修改</Button>
          <Button @click="cancel">取消</Button>
        </div>
      </Modal>
      <del-modal ref="delModal"
                 title='角色'
                 @del="del"
                 :delArr="selectData"
                 :url="urlRoleDel"></del-modal>
    </div>
  </div>
</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import delModal from 'public/delModal';
export default {
  components: {
    'del-modal': delModal,
  },
  data() {
    return {
      urlRoleList: '/sys/role/list',
      urlRoleDel: '/sys/role/del',
      urlRoleNew: '/sys/role/new',
      urlRoleEdit: '/sys/role/edit',
      urlModuleList: '/sys/module/getallinlevels',
      urleditModule: '/sys/role/getbyid',
      rules: {
        rolename: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' },
        ],
        level: [
          { required: true, message: '角色等级不能为空', trigger: 'change' },
        ],
        user_type: [
          { required: true, message: '角色类型不能为空', trigger: 'change' },
        ],
      },
      waterRecordPage: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      formItem: {
        name: '',
      },
      roleData: [],
      roleColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '名称',
          key: 'rolename',
        },
        {
          title: '备注',
          key: 'description',
        },
        {
          title: '操作',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                '编辑角色'
              ),
            ]);
          },
        },
      ],
      selectData: [],
      actionPage: '1',
      updateTitle: '',
      moduleModal: false,
      btnChange: false,
      btnSave: false,
      moduleData: [],
      moduleColumns2: [
        {
          title: '名称',
          key: 'title',
          width: 200,
        },
        {
          title: '权限分配',
          render: (h, params) => {
            if (params.row.actions && params.row.actions.length > 0) {
              let html = [];
              let aa = [];
              params.row.actions.map(item => {
                if (item.checked) {
                  html.push(
                    h(
                      'Checkbox',
                      {
                        props: {
                          label: item.id,
                        },
                        style: {
                          marginRight: '3px',
                        },
                      },
                      item.title
                    )
                  );
                  aa.push(item.id);
                } else {
                  html.push(
                    h(
                      'Checkbox',
                      {
                        props: {
                          label: item.id,
                        },
                        style: {
                          marginRight: '3px',
                        },
                      },
                      item.title
                    )
                  );
                }
              });
              return h(
                'CheckboxGroup',
                {
                  props: {
                    value: aa,
                  },
                },
                html
              );
            } else {
              return null;
            }
          },
        },
      ],
      moduleColumns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h('Table', {
              props: {
                data: params.row.children,
                columns: this.moduleColumns2,
              },
            });
          },
        },
        {
          title: '名称',
          key: 'title',
          width: 200,
        },
        {
          title: '权限分配',
          render: (h, params) => {
            if (params.row.actions && params.row.actions.length > 0) {
              let html = [];
              let aa = [];
              params.row.actions.map(item => {
                if (item.checked) {
                  html.push(
                    h(
                      'Checkbox',
                      {
                        props: {
                          label: item.id,
                        },
                        style: {
                          marginRight: '3px',
                        },
                      },
                      item.title
                    )
                  );
                  aa.push(item.id);
                } else {
                  html.push(
                    h(
                      'Checkbox',
                      {
                        props: {
                          label: item.id,
                        },
                        style: {
                          marginRight: '3px',
                        },
                      },
                      item.title
                    )
                  );
                }
              });
              return h(
                'CheckboxGroup',
                {
                  props: {
                    value: aa,
                  },
                },
                html
              );
            } else {
              return null;
            }
          },
        },
        {
          title: '是否显示左侧导航栏',
          width: 200,
        },
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
      ],
      moduleItem: {
        level: '',
        user_type: '',
      },
      _id: '',
      role_id: '',
      nav_item: [],
      data_nav: [],
      nav_list: [],
      typeList: [
        {
          title: '村级河长',
          value: '0',
        },
        {
          title: '镇级河长',
          value: '1',
        },
        {
          title: '区级河长',
          value: '2',
        },
        {
          title: '市级河长',
          value: '3',
        },
        {
          title: '河长办经办人',
          value: '4',
        },
        {
          title: '职能人员',
          value: '5',
        },
        {
          title: '河长助理',
          value: '6',
        },
        {
          title: '河长办负责人',
          value: '7',
        },
        {
          title: '河长办人员',
          value: '8',
        },
      ],
    };
  },
  methods: {
    checkName() {
      let params = {
        data: {
          searchValue: {
            rolename: this.moduleItem.rolename,
          },
        },
        url: this.urlRoleList,
        token: storage.session.get('token'),
        success: res => {
          if (parseInt(res.data.result.totalSize) !== 0) {
            this.$Message.warning({
              content: '已被注册',
            });
          } else {
            this.$Message.success({
              content: '可用',
            });
          }
        },
      };
      ajaxPost(params);
    },
    submitSearch(page = 1) {
      let params = {
        data: {
          order: { _id: -1 },
          searchValue: {},
          pageSize: this.waterRecordPage.pageSize,
          page,
        },
        url: this.urlRoleList,
        token: storage.session.get('token'),
        success: res => {
          this.roleData = res.data.result.result;
          this.waterRecordPage.total = res.data.result.totalSize;
        },
      };
      if (this.formItem.name !== '') {
        params.data.searchValue.rolename = `${this.formItem.name}|#|like`;
      }
      ajaxPost(params);
    },
    edit(row) {
      this.updateTitle = '编辑角色';
      this.btnSave = false;
      this.btnChange = true;
      this.moduleItem.rolename = row.rolename;
      this.moduleItem.description = row.description;
      this.moduleItem.level = row.level;
      this.moduleItem.user_type = row.user_type;
      this._id = row._id;
      this.role_id = row.roleid;
      this.getbyid(row.roleid);
      this.moduleModal = true;
    },
    showSelect(data) {
      this.selectData = data;
    },
    del() {
      this.selectData = [];
      this.submitSearch(this.actionPage);
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择角色');
      }
    },
    checkRole(data) {
      this.nav_list = [];
      this.nav_item = [];
      this.data_nav = [];
      data.map(item => {
        this.nav_list.push(item.id);
        if (item.title === '系统管理') {
          this.nav_item.push({
            title: '系统管理',
            name: '1',
            icon: 'icon-yonghu1',
            children: [
              {
                name: '部门管理',
                link: 'department',
              },
              {
                name: '用户管理',
                link: 'user',
              },
              {
                name: '职能部门管理',
                link: '',
              },
            ],
          });
        } else if (item.title === '综合管理') {
          this.nav_item.push({
            title: '综合配置',
            name: '2',
            icon: 'icon-zongheguanli1',
            children: [{}],
          });
        } else if (item.title === '考核标准') {
          this.nav_item.push({
            title: '考核标准管理',
            name: '3',
            icon: 'icon-kaoheguanli1',
            children: [{}],
          });
        } else if (item.title === '系统权限设置') {
          this.nav_item.push({
            title: '系统权限设置',
            name: '5',
            icon: 'icon-duobumenxietong1',
            children: [
              {
                name: '系统角色',
                link: 'role',
              },
            ],
          });
        } else if (item.title === '工作日志') {
          this.nav_item.push({
            title: '工作日志',
            name: '6',
            icon: 'icon-shijianchuli',
            children: [{}],
          });
        } else if (item.title === '新闻动态管理') {
          this.data_nav.push({
            title: '新闻动态管理',
            name: '1',
            icon: 'icon-xinwendongtaiguanli1',
            children: [
              {
                name: '素材管理',
                link: 'material',
              },
              {
                name: '新闻管理',
                link: 'flood',
              },
              {
                name: '公告管理',
                link: 'notice',
              },
              {
                name: '政策管理',
                link: 'policy',
              },
            ],
          });
        } else if (item.title === '河道数据管理') {
          this.data_nav.push({
            title: '河湖管理',
            name: '2',
            icon: 'icon-hedaoshujuguanli1',
            children: [
              // {
              //   name: '一张图',
              //   link: 'data-chart',
              // },
              {
                name: '河道综合管理',
                link: 'river',
              },
              {
                name: '湖泊水库管理',
                link: '',
              },
              {
                name: '泵闸站管理',
                link: 'gate-pump',
              },
              {
                name: '排污口管理',
                link: '',
              },
              {
                name: '河长牌管理',
                link: '',
              },
              {
                name: '河长名录管理',
                link: 'directories',
              },
            ],
          });
        } else if (item.title === '工作履职管理') {
          this.data_nav.push({
            title: '工作履职管理',
            name: '3',
            icon: 'icon-gongzuolvzhiguanli1',
            children: [
              {
                name: '签到管理',
                link: 'sign',
              },
              {
                name: '巡查管理',
                link: 'patrol',
              },
            ],
          });
        } else if (item.title === '考核管理') {
          this.data_nav.push({
            title: '考核管理',
            name: '4',
            icon: 'icon-kaoheguanli1',
            children: [
              {
                name: '考核标准管理',
                link: 'ass-stand',
              },
            ],
          });
        } else if (item.title === '多部门协同') {
          this.data_nav.push({
            title: '多部门协同',
            name: '5',
            icon: 'icon-duobumenxietong1',
            children: [{}],
          });
        } else if (item.title === '事件处理') {
          this.data_nav.push({
            title: '事件处理',
            name: '6',
            icon: 'icon-shijianchuli1',
            children: [
              {
                name: '投诉处理',
                link: 'wechat',
              },
              {
                name: '巡河事件',
                link: 'thing',
              },
              {
                name: '意见反馈',
                link: 'option',
              },
            ],
          });
        } else if (item.title === '重点项目处理') {
          this.data_nav.push({
            title: '重点项目管理',
            name: '7',
            icon: 'icon-zhongdianxiangmuguanli1',
            children: [
              {
                name: '重大项目',
                link: 'major-projects',
              },
            ],
          });
        }
      });
    },
    changePage(page) {
      this.submitSearch(page);
      this.actionPage = page;
    },
    cancel() {
      this.moduleModal = false;
    },
    getModule() {
      let that = this;
      let params = {};
      params.data = {
        searchValue: { index: '0|#|ne' },
        order: { index: 1 },
      };
      params.url = this.urlModuleList;
      params.token = storage.session.get('token');
      params.success = function (res) {
        if (res.data.code == '0000') {
          that.$Loading.finish();
          res.data.result.result.modules.map(item => {
            item._expanded = true;
            item._disableExpand = true;
          });
          that.moduleData = res.data.result.result.modules;
          console.log(that.moduleData);
        }
      };
      ajaxPost(params);
    },
    addrole() {
      this.btnChange = false;
      this.btnSave = true;
      this.updateTitle = '新增角色';
      this.moduleModal = true;
      this.moduleItem = {
        rolename: '',
        description: '',
        level: '',
        user_type: '',
      };
      this.getModule();
    },
    ok() {
      let that = this;
      let params = {};
      params.data = {};
      params.data.user_type = this.moduleItem.user_type;
      params.data.rolename = this.moduleItem.rolename;
      params.data.description = this.moduleItem.description;
      params.data.level = this.moduleItem.level;
      params.data.modules = this.moduleData;
      params.data.nav_item = this.nav_item;
      params.data.data_nav = this.data_nav;
      params.data.nav_list = this.nav_list;
      let id_list = [];
      $('.ivu-checkbox-wrapper-checked .ivu-checkbox-input').each(function () {
        if ($(this).val() != 'on') {
          id_list.push($(this).val());
        }
      });
      params.data.id_list = id_list;
      params.url = this.urlRoleNew;
      params.token = storage.session.get('token');
      params.success = function (res) {
        if (res.data.code == '0000') {
          that.$Loading.finish();
          that.$Message.success({
            content: '新增成功',
          });
          that.moduleModal = false;
          that.submitSearch(that.actionPage);
        } else {
          that.$Message.warning({
            content: res.data.message,
          });
        }
      };
      ajaxPost(params);
    },
    changeRole() {
      let that = this;
      let params = {};
      params.data = {};
      params.data.rolename = this.moduleItem.rolename;
      params.data.description = this.moduleItem.description;
      params.data.level = this.moduleItem.level;
      params.data.modules = this.moduleData;
      params.data.nav_list = this.nav_list;
      params.data.nav_item = this.nav_item;
      params.data.data_nav = this.data_nav;
      params.data.user_type = this.moduleItem.user_type;
      let id_list = [];
      $('.ivu-checkbox-wrapper-checked .ivu-checkbox-input').each(function () {
        if ($(this).val() != 'on') {
          id_list.push($(this).val());
        }
      });
      params.data.id_list = id_list;
      params.data._id = this._id;
      params.data.roleid = this.role_id;
      params.url = this.urlRoleEdit;
      params.token = storage.session.get('token');
      params.success = function (res) {
        if (res.data.code == '0000') {
          that.$Loading.finish();
          that.$Message.success({
            content: '修改成功',
          });
          that.moduleModal = false;
          that.submitSearch(that.actionPage);
        } else {
          that.$Message.warning({
            content: res.data.message,
          });
        }
      };
      ajaxPost(params);
    },
    getbyid(role_id) {
      let that = this;
      let params = {};
      params.data = {};
      params.data.searchValue = {
        roleid: role_id,
      };
      params.url = this.urleditModule;
      params.token = storage.session.get('token');
      params.success = function (res) {
        if (res.data.code == '0000') {
          that.$Loading.finish();
          res.data.result.result.modules.map(item => {
            item._expanded = true;
            item._disableExpand = true;
          });
          that.moduleData = res.data.result.result.modules;
        } else {
          that.$Message.warning({
            content: res.data.message,
          });
        }
      };
      ajaxPost(params);
    },
  },
  mounted() {
    this.submitSearch();
    this.getModule();
  },
};
</script>
